<!-- 书评界面,, -->
<template>
	<view class="bd">
		<view class="oneTime" v-if="type==1">
			<!-- 每本书只有一次机会 -->
			每本书仅有<text style="color: red;">1次</text>评价机会，<br>表达你最真实的想法吧~
		</view>

		<view class="comment" v-if="type==1">
			<!-- 好看一般不好看 -->
			<view class="comment-item" :class="{ifChoose:ifChoose==3}" @click="choose(3)">
				<image class="item-pic" src="../../../static/非常满意.png"></image>
				<view class="item-text">好看</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose==2}" @click="choose(2)">
				<image class="item-pic" src="../../../static/一般.png"></image>
				<view class="item-text">一般</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose==1}" @click="choose(1)">
				<image class="item-pic" src="../../../static/不满意.png"></image>
				<view class="item-text">不好看</view>
			</view>
		</view>

		<view class="juqing" v-if="type==1">
			<text class="tit">剧情:</text>

			<view class="comment-item" :class="{ifChoose:ifChoose1==3}" @click="choose1(3)">
				<view class="item-text">剧情精彩</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose1==2}" @click="choose1(2)">
				<view class="item-text">剧情平淡</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose1==1}" @click="choose1(1)">
				<view class="item-text">剧情混乱</view>
			</view>
		</view>

		<view class="juqing" v-if="type==1">
			<text class="tit">文笔:</text>

			<view class="comment-item" :class="{ifChoose:ifChoose2==3}" @click="choose2(3)">
				<view class="item-text">妙笔生花</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose2==2}" @click="choose2(2)">
				<view class="item-text">语句通顺</view>
			</view>

			<view class="comment-item" :class="{ifChoose:ifChoose2==1}" @click="choose2(1)">
				<view class="item-text">文笔不好</view>
			</view>
		</view>

		<view class="msg">
			<!-- 分享感受 -->
			<textarea placeholder="分享一下你的感受吧..." class="inner-msg" v-model="textSend"></textarea>
		</view>

		<view class="btn">
			<view class="btninner" @click="sendTo()">发表</view>
		</view>

	</view>
</template>

<script>
	import {
		addBookComment, //新增书评或评论
	} from '../../../config/api.js'

	export default {
		data() {
			return {
				ifChoose: -1, //评分的选择
				ifChoose1: -1,
				ifChoose2: -1,

				textSend: '', //绑定的表单，准备发送评价
				bookId: -1, //书籍id
				type: -1, //1书评，0评论
				itemid: 0, //默认为第一级评论
			}
		},
		onLoad(options) {
			this.bookId = options.id
			this.type = options.type //评论类型
			this.itemid = options.itemid
			console.log('posting comment for book', this.bookId, ', type', this.type, ', targetCommentId', this.itemid)
		},
		methods: {
			//点击发表函数start
			async sendTo() {
				if (this.textSend == '') {
					uni.showToast({
						title: '内容为空',
						icon: 'error',
					})
					return
				}
				if (this.type == 1 && this.ifChoose == -1) {
					uni.showToast({
						title: '请选择评价',
						icon: 'error',
					})
					return
				}

				let sendMsg = {
					bookId: this.bookId,
					comment: this.textSend,
					isBookRating: this.type == 1 ? 1 : 0, //1书评,0评论
					parentId: this.type == 1 ? 0 : this.itemid, //一级评论
					rating: this.ifChoose, //评分1~3
				}

				const res = await addBookComment(sendMsg)

				console.log("发送评论成功:", res)
				uni.showToast({
					title: '发送评论成功',
					icon: 'none'
				})
				uni.navigateBack(-1);

			},

			//改变ifChoose的值
			choose(val) {
				console.log(val)
				this.ifChoose = val
			},
			choose2(val) {
				console.log(val)
				this.ifChoose2 = val
			},
			choose1(val) {
				console.log(val)
				this.ifChoose1 = val
			},
		}
	}
</script>

<style scoped>
	.btninner {
		width: 35%;
		background: linear-gradient(to right, rgb(253, 225, 59), rgb(254, 200, 2));
		border-radius: 40rpx;
		font-weight: bold;
		display: inline-block;
		padding: 20rpx 0;
	}

	.btn {
		text-align: center;
		padding: 20rpx 0;
		width: 100%;
	}

	.msg {
		flex: 1;
		padding: 20rpx;
	}

	.inner-msg {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 2rpx solid rgb(154, 154, 154);
		padding: 20rpx;
	}

	.juqing {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: rgb(100, 100, 100);
		padding: 20rpx;
		gap: 20rpx;
	}

	.ifChoose {
		border: 3rpx solid rgb(246, 125, 8) !important;
		background-color: rgb(255 230 205) !important;
	}

	.item-text {
		font-weight: bold;
	}

	.juqing .item-text {
		font-weight: 500;
		font-size: 0.9rem;
	}

	.item-pic {
		height: 70rpx;
		width: 70rpx;
	}

	.comment-item {
		border: 3rpx solid transparent;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		gap: 20rpx;
		flex: 1;
		height: 96rpx;
		background-color: rgb(246, 246, 246);
	}

	.comment {
		color: rgb(100, 100, 100);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		padding: 24rpx;
		gap: 20rpx;
	}

	.oneTime {
		padding: 16rpx;
		text-align: center;
		background: linear-gradient(to right, rgb(253, 225, 59), rgb(254, 200, 2));
		line-height: 1.5;
	}

	.bd {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		letter-spacing: 0.1rem;
	}
</style>